<template>
	<view class="box" :style="theme">
		<image class="box_img" mode="widthFix" :src="imgHost+'/ic_paysuccess@2x.png'"></image>
		<text class="box_font">购买成功</text>
		<text class="box_fonts">可在个人中心“我的订单”中查看</text>

		<view class="box_btn">
			<view class="box_btn_hui" @click="jump('/pages/index/index','', 1)"><text>回到首页</text></view>
			<view class="box_btn_see" @click="goD"><text>查看订单</text></view>
		</view>
		<view class="mp_boxs" v-if="ordList.length>0">
			<view class="mp_box">
				<text
					v-if="currentOrder.itemName==null||currentOrder.itemName==''||currentOrder.itemName==undefined">{{currentOrder.name||'-'}}</text>
				<text v-else>{{currentOrder.itemName||'-'}}</text>
				<text>使用时间：{{currentOrder.validTime||'-'}}</text>
				<view class="code_box_code" :class="{'bottoms': ordList.length==1 }">
					<canvas canvas-id="qrcode" style="width: 150px;height: 150px;margin: 0 auto;" />
				</view>
				<text v-if="ordList.length>1">共 {{ordList.length||'-'}} 张劵</text>
			</view>
			<view class="next" v-if="ordList.length>1">
				<image class="arrow" :class="{ 'arrow-disabled': currentIndex === 0 }"
					@click="currentIndex > 0 ? showPrevOrder() : null" mode="widthFix"
					:src="imgHost + (currentIndex === 0 ? '/ar_left_grey@2x.png' : '/ar_left@2x.png')"></image>
				<image class="arrow" :class="{ 'arrow-disabled': currentIndex === ordList.length - 1 }"
					@click="currentIndex < ordList.length - 1 ? showNextOrder() : null" mode="widthFix"
					:src="imgHost + (currentIndex === ordList.length - 1 ? '/ar_right_grey@2x.png' : '/ar_right@2x.png')">
				</image>
				<!-- <image @click="showPrevOrder()" class="next_left" mode="widthFix" :src="imgHost+'/ar_left@2x.png'">
				</image>
				<image mode="widthFix" :src="imgHost+'/ar_left_grey@2x.png'"></image>
				<image  @click="showNextOrder()" class="next_right" mode="widthFix"
					:src="imgHost+'/ar_right@2x.png'">
				</image>
				<image  mode="widthFix" :src="imgHost+'/ar_right_grey@2x.png'"></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				type: '',
				orderId: '',
				ordList: [],
				businessId: '',
				currentIndex: 0,
				preFlag: false
			}
		},
		onLoad(ops) {
			this.type = ops.type
			this.orderId = ops.orderId
			this.businessId = ops.businessId
			this.getOrdList(ops.orderId)
			console.log(this.orderId, 'orderId')
		},
		computed: {
			currentOrder() {
				return this.ordList[this.currentIndex];
			}
		},
		methods: {
			showPrevOrder() {
				if (this.currentIndex > 0) {
					this.currentIndex--;
				} else {
					this.preFlag = true
				}
				// this.generateQRCode();
				this.qrFun(this.ordList[this.currentIndex].code)
			},
			showNextOrder() {
				if (this.currentIndex < this.ordList.length - 1) {
					this.currentIndex++;
					this.qrFun(this.ordList[this.currentIndex].code)
				} else {
					this.preFlag = false
				}
			},
			qrFun: function(text) {
				uni.showLoading({
					title: '加载中...'
				})
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						uni.hideLoading()
					}
				})
			},
			getOrdList(e) {
				this.$app.ajax({
					data: {
						param: {
							checkFlag: 1,
							orderId: e
							// orderId: '03202411281551113722563'
						}
					},
					api: this.$api.paySuCode()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.ordList = res.recordList
						this.qrFun(this.ordList[0].code)
					}
				}).catch(() => {})
			},
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			goD() {
				this.jump3('/pages/order/list?type=', 0)
				// if(this.type == 1) {
				// 	// this.jump('/pages/order/detail?id=', this.businessId)
				// 	this.jump('/pages/order/list?type=', 0)
				// } else if(this.type == 2) {
				// 	// this.jump('/pages/curriculum/orderDetail?orderId=', this.orderId)
				// 	this.jump('/pages/order/list?type=', 3)
				// } else if(this.type == 3) {
				// 	this.jump('/pages/order/list?type=', 1)
				// } else if(this.type == 4) {
				// 	this.jump('/pages/order/list?type=', 2)
				// } else if(this.type == 5) {
				// 	this.jump('/pages/order/list?type=', 4)
				// }  else if(this.type == 6) {
				// 	this.jump('/pages/member/myActivity')
				// }  else if(this.type == 8) {
				// 	this.jump3('/pages/member/myExchange')
				// }
			}

		}

	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.next {
		position: absolute;
		top: 50%;
		width: 80%;
		display: flex;
		justify-content: space-between;

		.next_left {
			left: 0;

		}

		.next_right {
			right: 0;

		}

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.mp_boxs {
		position: relative;
		width: 90%;
		margin: 20rpx 40rpx;
		margin-top: 50rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mp_box {


		display: flex;
		flex-direction: column;
		align-items: center;


		text:nth-child(1) {
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			margin-top: 60rpx;
		}

		text:nth-child(2) {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-top: 16rpx;
			margin-bottom: 40rpx;
		}

		text:nth-child(4) {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			margin-top: 24rpx;
			margin-bottom: 60rpx;
		}
	}

	.bottoms {
		padding-bottom: 78rpx;
	}

	.code_box_code {
		display: flex;
		justify-content: center;
	}

	.box {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 120rpx;
	}

	.box_img {
		width: 198rpx;
		// height: 220rpx;
	}

	.box_font {
		font-size: 34rpx;
		font-weight: 600;
		color: #222222;
		margin-top: 20rpx;
	}

	.box_fonts {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-top: 20rpx;
		margin-bottom: 32rpx;
	}

	.box_btn {
		// margin-top: 200rpx;
		display: flex;
		align-items: center;
	}

	.box_btn_hui {
		width: 260rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 1px solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_btn_hui text {
		font-size: 30rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_btn_see {
		width: 260rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 1px solid $color;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
	}

	.box_btn_see text {
		font-size: 30rpx;
		font-weight: 400;
		color: $color;
	}
</style>